<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .app{
            width: 600px;
            height: 600px;
            background: pink;
            margin: 0 auto;
        }
        .app > div{
            height: 80px;
            border: 1px solid #000;
        }
        .app > button{
            width: 66px;
            height: 66px;
            display: block;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <!--主组件-->
    <div class="app">
        <prent></prent>
    </div>

    <!--父组件 prent-->
    <template id="prent">
        <div>
            <h1>prent++{{name}}++{{pmsg}}</h1>
        </div>
        <child @change="changePmsg"></child>
    </template>

    <!--子组件 prent-->
    <template id="child">
        <div>
            <h1>child++{{name}}</h1>
            <button @click="say">用这个按钮给父组件传递信息</button>
            <!-- 省略 say 方法 的写法 -->
            <button @click="$emit('change',sonmsg)">用这个按钮给父组件传递信息</button>
        </div>
    </template>
</body>
</html>
<script>
    //父组件获取子组件数据方法
        //1.父组件定义一个数据（空字符串）
        //2.父组件提供一个更改自身数据 pmsg 的方法
        //3.调用子组件的时候 给其 绑定一个自定义事件
        //4.触发绑定再自身上的自定义事件
    const {log} = console
    const app = Vue.createApp({
        data(){
            return{
                name:'ming'
            }
        },
        components:{
            prent:{
                methods:{
                    changePmsg(msg){
                        this.pmsg = msg
                    }
                },
                data(){
                    return{
                        name:'ming',
                        pmsg:''
                    }
                },
                template:'#prent',
                components:{
                    emits:['change'],
                    child:{
                        template:'#child',
                        methods: {
                            say(){
                                this.$emit('change',this.sonmsg)
                            }
                        },
                        data(){
                            return{
                                name:'hong',
                                sonmsg:'儿子的数据'
                            }
                        }
                    }
                }
            }
        }
        
    })
    app.mount('.app')
</script>